<template>
  <div :class="['content', {active: isPC}]">
    <div
      class="home"
      @mousemove="mousemoveEvent"
      @mouseout="mouseoutEvent"
    >
      <h1 class="title">{{ home.title }}</h1>
      <h2 class="des">{{ home.des }}</h2>
      <p class="name">{{ home.name }}</p>
      <p class="info">{{ home.info }}</p>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'home',
  computed: {
    ...mapState(['home', 'isPC'])
  },
  methods: {
    mousemoveEvent (e) {
      if (!this.isPC) return
      let target = e.target
      let className = new RegExp('home', 'g')
      while (!className.test(target.className)) {
        target = e.target.parentNode
      }

      let pageX = e.pageX
      let pageY = e.pageY
      let bannerWidth = target.offsetWidth / 2
      let bannerHeight = target.offsetHeight / 2
      let bannerLeft = target.offsetLeft
      let bannerTop = target.offsetTop
      let x = (pageX - bannerLeft - bannerWidth) / (bannerWidth / 6)
      let y = -(pageY - bannerTop - bannerHeight) / (bannerHeight / 6)
      target.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`
    },
    mouseoutEvent (e) {
      if (!this.isPC) return
      let target = e.target
      let className = new RegExp('home', 'g')
      while (!className.test(target.className)) {
        target = e.target.parentNode
      }
      target.style.transform = 'rotateY(0deg) rotateX(0deg)'
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  perspective: 800;
  position:relative;
  width: 100%;
  height: 100%;
  &.active:hover {
    .home {
      box-shadow: 1px 1px 100px rgba(0, 0, 0, .6);
      background-color: rgba(235, 217, 217, 0.3);
      &:hover {
        background-color: rgba(217, 225, 235, 0.4);
      }
    }
  }
  .home {
    position: absolute;
    width: 700px;
    min-width: 320px;
    height: 300px;
    border-radius: 15px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    padding: 10px 0;
    box-sizing: border-box;
    transition: all .5s linear;
    * {
      cursor: default;
      text-align: center;
      color: #212529;
      font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    .title {
      font-size: 3.5rem;
      margin: 40px 0;
      font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
      font-weight: 800;
      animation: home 1.5s linear;
    }
    .des {
      font-size: 20px;
      margin: 30px 0;
      font-weight: 600;
      animation: home 1.5s linear;
    }
    .name {
      font-size: 20px;
      font-weight: 500;
      margin: 20px 0;
      animation: home 1.5s linear;
    }
    .info {
      font-size: 20px;
      margin: 20px 0;
      font-weight: 500;
      animation: home 1.5s linear;
    }
  }
}

@keyframes home {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media screen and (max-width: 600px) {
  .content {
    .home {
      width: 80vw;
      .title {
        font-size: 1.6rem;
      }
      .des {
        font-size: 1.2rem;
      }
      .name, .info {
        font-size: 1rem;
      }
    }
  }
}
</style>
